
import React, { useCallback, useEffect, useMemo } from 'react';
import { connect } from 'react-redux';
import dayjs from 'dayjs';
import URI from 'urijs';
import { bindActionCreators } from 'redux';

import './App.css'

import { h0 } from '../common/fp';
import useNav from '../custom-hooks/useNav';
import Header from '../components/header/Header.jsx';
import Nav from '../components/nav/Nav';


import Bottom from './components/bottom/Bottom';
import List from './components/list/List';

import {
	setFrom,
	setTo,

	setDepartDate,
	prevDate,
	nextDate,

	toggleOrderType,
	toggleHighSpeed,
	toggleOnlyTickets,
	toggleIsFiltersVisible,

	setTicketTypes,
	setTrainTypes,
	setDepartStations,
	setArriveStations,

	setTrainList,

	setCheckedTicketTypes,
	setCheckedTrainTypes,
	setCheckedDepartStations,
	setCheckedArriveStations,
} from './store/actions';



function App (props) {
	const {
		from,
		to,
		departDate,

		dispatch,

		highSpeed,
		orderType,
		onlyTickets,
		isFiltersVisible,

		trainList,

		ticketTypes,
		trainTypes,
		departStations,
		arriveStations,
		checkedTicketTypes,
		checkedTrainTypes,
		checkedDepartStations,
		checkedArriveStations,

	} = props;


	useEffect(() => {
		const queries = URI.parseQuery(window.location.search);
		const { from, to, date } = queries;
		dispatch(setFrom(from));
		dispatch(setTo(to));
		dispatch(setDepartDate(h0(dayjs(date).valueOf())));
	}, []);


	useEffect(() => {
		let url = new URI('./mock/query.json')
			.setSearch('date', dayjs(departDate).format('YYYY-MM-DD'));

		fetch(url)
			.then(res => res.json())
			.then(result => {
				const {
					dataMap: {
						directTrainInfo: {
							trainList,
							filter: {
								ticketType,
								trainType,
								depStation,
								arrStation
							},
						},
					}
				} = result.data;


				dispatch(setTrainList(trainList));

				dispatch(setTicketTypes(ticketType));
				dispatch(setTrainTypes(trainType));
				dispatch(setDepartStations(depStation));
				dispatch(setArriveStations(arrStation));

			})
	}, [from,
		to,
		departDate,])

	const onBack = useCallback(() => {
		window.history.back();
	}, []);

	const { isPrevDisabled, isNextDisabled, prev, next } = useNav(
		departDate,
		dispatch,
		prevDate,
		nextDate
	);

	const bottomCbs = useMemo(() => {
		return bindActionCreators(
			{
				toggleOrderType,
				toggleHighSpeed,
				toggleOnlyTickets,
				toggleIsFiltersVisible,
				setCheckedTicketTypes,
				setCheckedTrainTypes,
				setCheckedDepartStations,
				setCheckedArriveStations,
			},
			dispatch
		);
	}, []);

	return (
		<div>
			<div className="header-wrapper">
				<Header title={`${from} ⇀ ${to}`} onBack={onBack} />
			</div>
			<Nav
				date={departDate}
				isPrevDisabled={isPrevDisabled}
				isNextDisabled={isNextDisabled}
				prev={prev}
				next={next}
			/>
			<List list={trainList} />
			<Bottom
				highSpeed={highSpeed}
				orderType={orderType}
				onlyTickets={onlyTickets}
				isFiltersVisible={isFiltersVisible}

				ticketTypes={ticketTypes}
				trainTypes={trainTypes}
				departStations={departStations}
				arriveStations={arriveStations}
				checkedTicketTypes={checkedTicketTypes}
				checkedTrainTypes={checkedTrainTypes}
				checkedDepartStations={checkedDepartStations}
				checkedArriveStations={checkedArriveStations}
				{...bottomCbs}
			/>
		</div>
	)
}

export default connect(
	function mapStateToProps (state, ownProps) {
		return state;
	},
	function mapDispatchToProps (dispatch) {
		return { dispatch }
	}
)(App);